<template>
  <div class="date-picker-container">
    <el-date-picker
      v-model="checkInDate"
      type="date"
      placeholder="入住日期"
      :disabled-date="disableCheckInDates"
      @change="handleCheckInChange"
      value-format="YYYY-MM-DD"
    />
    <span class="separator">至</span>
    <el-date-picker
      v-model="checkOutDate"
      type="date"
      placeholder="离店日期"
      :disabled="!checkInDate"
      :disabled-date="disableCheckOutDates"
      value-format="YYYY-MM-DD"
    />
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  checkIn:'',
  checkOut:''
})

const emit = defineEmits(['update:checkIn', 'update:checkOut'])

const checkInDate = ref(props.checkIn)
const checkOutDate = ref(props.checkOut)

// 处理入住日期变化
const handleCheckInChange = (date) => {
  if (checkOutDate.value && new Date(checkOutDate.value) <= new Date(date)) {
    checkOutDate.value = ''
  }
}

// 禁用入住日期（只能选择今天及以后的日期）
const disableCheckInDates = (time) => {
  return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
}

// 禁用离店日期（必须晚于入住日期）
const disableCheckOutDates = (time) => {
  if (!checkInDate.value) return true
  return time.getTime() <= new Date(checkInDate.value).getTime()
}

// 监听变化并触发事件
watch([checkInDate, checkOutDate], ([newCheckIn, newCheckOut]) => {
  emit('update:checkIn', newCheckIn)
  emit('update:checkOut', newCheckOut)
})
</script>

<style scoped>
.date-picker-container {
  display: flex;
  align-items: center;
}

.separator {
  margin: 0 10px;
  color: #666;
}

/* 调整Element Plus日期选择器样式 */
:deep(.el-date-editor) {
  width: 140px;
}

@media (max-width: 768px) {
  .date-picker-container {
    flex-direction: column;
    gap: 10px;
  }
  
  :deep(.el-date-editor) {
    width: 100%;
  }
}
</style>